<template>
  <el-header style="height:80px;padding:0">
    <div class="head">
      <div style="margin: 0 50px;position: relative">
        <img src="../../../static/pic/school.png" class="head-img" alt="">
        <!--                <div class="exit" >退出系统</div>-->
<!--        <form action="http://172.16.211.75:8080/logout">-->

        <label @click="showUserInfo" class="userInfo"><h3>{{userName}}</h3></label>
        <form action="http://172.22.44.33:8080/logout">
          <input class="exit" type="submit"  value="退出系统">
        </form>
      </div>
      <el-dialog
        title="用户信息"
        top="125px"
        :visible.sync="showUserInfoDialog"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :before-close="closeModel"
        append-to-body>
        <hr class="boundary">
        <ul class="dialogContent">
          <li class="dialogContentItem">
            <span class="dItemText">用户ID:</span>
            <template>
              <el-input style="width: 50%" :value="userId"></el-input>
            </template>
          </li>
          <li class="dialogContentItem">
            <span class="dItemText">用户名:</span>
            <template>
              <el-input style="width: 50%" :value="userName"></el-input>
            </template>
          </li>
          <li v-if="password!==null" class="dialogContentItem">
            <span class="dItemText">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:</span>
            <template>
              <el-input style="width: 50%" :disabled="editPassword" :type="passwordType" v-model="password"></el-input>
            </template>
            <el-button style="position: relative; left:2% "
              size="mini"
              @click="showPassword">编辑</el-button>
          </li>
        </ul>
        <hr class="boundary">
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeModel">取消</el-button>
          <el-button type="primary" @click="submitUerInfo">保存</el-button>
        </div>
      </el-dialog>

    </div>
  </el-header>

</template>

<script>
  export default {
    data() {
      return {
        userName:"",
        userId:"",
        password:null,
        passwordType:"password",
        editPassword:true,
        showUserInfoDialog:false
      };
    },
    methods: {
      loginOut () {
        this.cleanData()
        $.ajax({
          type: 'GET',
          async: false,
          url: this.api + 'logout',
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
          },
          success (res) {
            console.log(res)
          }
        })
      },
      cleanData(){
        sessionStorage.removeItem('userId')
        sessionStorage.removeItem('userName')
        sessionStorage.removeItem('password')
        sessionStorage.removeItem('roleId')
      },
      showUserInfo(){
        this.password = sessionStorage.getItem('password')
        this.showUserInfoDialog = true
      },
      closeModel(){
        this.showUserInfoDialog = false
        this.editPassword = true
        this.passwordType = "password"
      },
      showPassword(){
        this.editPassword = false
        this.passwordType = "text"
      },
      submitUerInfo(){
        let self = this
        if(sessionStorage.getItem('roleId') ==2) {
          $.ajax({
            type: 'PUT',
            url: self.api + 'propertyUser',
            headers: {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest'
            },
            xhrFields: {
              withCredentials: true
            },
            dataType: 'json',
            data: JSON.stringify({
              'id': self.userId,
              'password': self.password
            }),
            success (data) {
              if (data === 1) {
                console.log(self.password)
                sessionStorage.setItem('password',self.password)
                self.$message({
                  message: '密码修改成功！',
                  type: 'success'
                })
              }
            }
          })
        }
        this.closeModel()
      },
      getUerInfo(){
        if(sessionStorage.getItem('roleId')!==2){
          $.ajax({
            type: 'POST',
            async: false,
            url: this.api + 'userInfo',
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            xhrFields: {
              withCredentials: true
            },
            success (data) {
              sessionStorage.setItem('userId',data.id)
              sessionStorage.setItem('userName',data.name)
              sessionStorage.setItem('roleId',data.role_id)
            }
          })
        }
        this.userId = sessionStorage.getItem('userId')
        this.userName = sessionStorage.getItem('userName')
        this.password = sessionStorage.getItem('password')
        // console.log(sessionStorage.getItem('userName'))
      }

    },
    mounted() {
      this.getUerInfo()
      // this.userName = sessionStorage.getItem('userName')
      // console.log("test"+sessionStorage.getItem('userName'))
    }
  }
</script>

<style scoped>
  /*el-header*/
  .head {
    width: 100%;
    min-width: 1024px;
    height: 80px;
    line-height: 80px;
    background-image: linear-gradient(to bottom left, #2b85ff, #409EFF)
  }

  .head-img {
    float: left;
    margin-top: 7px;
    height: 65px;
  }

  .exit {
    width: 80px;
    float: right;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    position: absolute;
    top: 27px;
    right: 0;
    cursor: pointer;
    border: 0;
    outline: none;
    background: transparent;
  }

  .userInfo {
    width: 80px;
    float: right;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    position: absolute;
    top: 0px;
    right: 85px;
    cursor: pointer;
    border: 0;
    outline: none;
    background: transparent;
  }
  /*@import "../../../assets/public/subModal.css";*/

  .dialogContent {
    /* background: red; */
    margin-top: 25px;
    height: 100%;
    width: 100%;
    text-align: center;
  }

  .dialogContent .dialogContentItem {
    height: 30px;
    margin: 0 0 20px 0;
  }

  .dialogContent .dialogContentItem .dItemText {
    margin-right: 15px;
  }

  .el-dialog__wrapper >>> .el-dialog {
    width: 430px;
  }

</style>
